<template>
    <SdyHeader title="啥都有" >
        <template #left>
            <van-icon class="cate-icon" name="aim" />
        </template>
        <template #title>
            <van-search @focus="inSearchHandler" shape="round" background="#c72418" placeholder="请输入搜索关键词" />
        </template>
        <template #right>
            <van-image v-if="isLogin" :src="avatar"></van-image>
            <router-link v-else to="/login">登录</router-link>
        </template>
    </SdyHeader>
        
    <!-- 轮播图 -->
    <SdyHomeBanner />

    <!-- 导航列表分类 -->
    <SdyHomeNavList />

    <!-- 首页秒杀 -->
    <SdyHomeHot />

    <!-- 商品列表 -->
    <SdyHomeGoodsList />
</template>

<script setup lang="ts">
// 倒入组件使用
import SdyHomeBanner from './components/SdyHomeBanner.vue'
import SdyHomeNavList from './components/SdyHomeNavList.vue'
import SdyHomeHot from './components/SdyHomeHot.vue'
import SdyHomeGoodsList from './components/SdyHomeGoodsList.vue'
import { useRouter, type Router } from 'vue-router'
import { ref, onMounted } from 'vue'
import { getUserInfoApi } from '@/api/users'

//拿到编程式导航的路由器
const $router:Router = useRouter()

//点击搜索框进入到search 路由
const inSearchHandler = () => {
    // console.log($router)
    //进行路由跳转
    $router.push('/search')
}

// 逻辑
// 登录按钮应该显示什么 ?
// 如果你登陆过, 我应该显示昵称
// 如果你没有登录, 显示登录按钮

// 0. 准备一个变量, 表示是否登陆过
const isLogin = ref<boolean>(false)
// 准备一个变量表示用户名
const avatar = ref<string>('')

// 1. 验证 token
const testToken = async () => {
  // 1-1. 从 localStorage 内拿到 token 和 user_id
  // 如果没有, 说明没有登录过
  const token = window.localStorage.getItem('token')
  const user_id = window.localStorage.getItem('user_id')
  if (!token || !user_id) {
    isLogin.value = false
    return
  }

  // 如果有, 说明你曾经登录过(不能保证是否过期, 不能保证是否被伪造)
  // 1-2. 根据 id 和 token 去请求用户详细信息
  const res = await getUserInfoApi(user_id)

  // 判断结果
  // 10019
  // 判断结果
  // 表示可以继续
  if (((res as unknown) as { code: string }).code === '10019') {
    isLogin.value = false
    return
  }

  // 表示登录过
  isLogin.value = true
  avatar.value = res.data[0].avatar
  console.log(res)
}

onMounted(() => {
  testToken()
})

</script>

<style scoped lang="scss">
@import '@/styles/variable.scss';
    .cate-icon {
        font-size: 24px;
        color: red;
    }




</style>